<template>
	<view class="expert">
		<view class="tab flex_center">
			<view class="item" @click="onTab(1)" :id="tab == 1 ? 'select' : ''">
				商品中心
			</view>

			<view class="item" @click="onTab(2)" :id="tab == 2 ? 'select' : ''">
				申请列表
			</view>

			<view class="item" @click="onTab(3)" :id="tab == 3 ? 'select' : ''">
				进行中
			</view>
		</view>

		<view class="container1 flex_r_between" v-show="tab == 1">
			<view class="list" v-for="(item,index) in list" :key="index"
				@click="$util.toUrl(`/pages/store/generalization/expert/expertDetail?data=${JSON.stringify(item)}`)">
				<view class="image">
					<image v-show="item.goods_image.length" :src="item.goods_image[0]" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view class="name hidden">{{item.name || ''}}</view>
					<view class="price flex_r_between">
						<text>¥{{Number(item.price).toFixed(0)}}</text>
						<view>推广</view>
					</view>
				</view>
			</view>
		</view>

		<view class="container2" v-show="tab == 2">
			<view class="list" v-for="(item,index) in log" :key="index">
				<view class="product flex_center">
					<view class="image">
						<image :src="$util.getAvatar(item.goods_image)" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name hidden">{{ item.name }}</view>
						<view class="grid flex_center">
							<view class="item" style="margin-right: 16rpx;">
								<view class="top">带货达人</view>
								<view class="bottom flex_center">
									<image :src="item.avatar" mode="aspectFill"></image>
									<text class="hidden">{{ item.nickname }}</text>
								</view>
							</view>
							<view class="item">
								<view class="top">持有曝光量</view>
								<view class="bottom flex_center">
									<text>{{ item.possess_num }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="info" v-if="item.suggest_num > item.possess_num">
					注意：该达人流量较少，可能无法产生订单，建议拒绝
				</view>

				<view class="btn flex_center">
					<view class="btn_item success" @click="checkApply(2 , item)">
						同意
					</view>
					<view class="btn_item error" @click="onCheck(item)">
						不同意
					</view>
				</view>
			</view>
		</view>

		<view class="container3" v-show="tab == 3">
			<view class="list" v-for="(item,index) in popularizeList" :key="index"
				@click="$util.toUrl(`/pages/store/generalization/expert/pendingDetail?data=${JSON.stringify(item)}`)">
				<view class="image">
					<image :src="$util.getAvatar(item.goods_image)" mode="aspectFill"></image>
				</view>
				<view class="left">
					<view class="name hidden">{{item.name || ''}}</view>
					<view class="data flex_center">
						<view class="item">
							<text>销售金额</text>
							<view>￥{{item.price}}</view>
						</view>
						<view class="item">
							<text>销售量</text>
							<view>{{item.order_num}}</view>
						</view>
						<view class="item">
							<text>已曝光/剩余</text>
							<view>{{ item.finishh_num }} / {{ item.popularize_num - item.finishh_num }}</view>
						</view>
						<view class="item">
							<text>佣金/单</text>
							<view class="red">￥{{item.cps_ratio}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="loading" v-if="list.length && tab == 1">
			<u-loadmore :status="status" />
		</view>
		<empty v-if="!list.length && tab == 1"></empty>
		<empty v-if="!log.length && tab == 2"></empty>
		<empty v-if="!popularizeList.length && tab == 3"></empty>



		<u-modal :show="showmodal" title="提示" content='操作成功' confirmText="我知道了" @confirm="onRef"></u-modal>

		<u-popup :safeAreaInsetBottom="false" :show="showcheck" @close="showcheck = false" bgColor="transparent" mode="center">
			<view class="check">
				<view class="title">拒绝原因</view>
				<view class="text">
					<textarea v-model="check_content" placeholder="请输入拒绝原因"
						placeholder-class="input-placeholder"></textarea>
				</view>
				
				<view class="btn flex_r_between">
					<view class="btn1" @click="showcheck = false">
						取消
					</view>
					<view class="btn2" @click="checkApply(3 , check_data)">
						确认
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		name: 'expertList',
		props: {

		},
		components: {
			empty
		},
		data() {
			return {
				tab: 1,

				list: [],
				total: 1,
				page: 1,

				status: 'loading',


				log: [],
				logpage: [],
				logtotal: 0,

				showmodal: false,

				popularizeList: [],
				popularizePage: 1,
				popularizeTotal: 0,

				showcheck: false,
				check_content: '',
				check_data: {},
			}
		},
		methods: {
			// 拒绝
			onCheck(item) {
				this.check_data = item;
				this.showcheck = true;
			},
			onTab(e) {
				this.tab = e;
				if (this.tab == 1) {
					this.page = 1;
					this.list = [];
					this.getProductList();
				}

				if (this.tab == 2) {
					this.logpage = 1;
					this.log = [];
					this.getAppleSellGoodsLog();
				}

				if (this.tab == 3) {
					this.popularizePage = 1;
					this.popularizeList = [];
					this.getPopularizeList();
				}
			},

			getProductList() {
				this.$get('/store_goods/getStoreGoodsList', {
					page: this.page,
					limit: 10,
					status: 2
				}).then(res => {
					this.status = 'loading'
					this.total = res.data.total;
					this.list.push(...res.data.data);
					if (this.total <= this.list.length) {
						this.status = 'nomore'
					}
				});
			},

			getMore() {
				if (this.tab == 1) {
					if (this.total > this.list.length) {
						this.page++;
						this.getProductList();
					}
				}

				if (this.tab == 2) {
					if (this.logtotal > this.log.length) {
						this.logpage++;
						this.getAppleSellGoodsLog();
					}
				}

				if (this.tab == 3) {
					if (this.popularizeTotal > this.popularizeList.length) {
						this.popularizePage++;
						this.getPopularizeList();
					}
				}
			},

			getAppleSellGoodsLog() {
				this.$get('/popularize/getAppleSellGoodsLog', {
					page: this.logpage,
				}).then(res => {
					this.log.push(...res.data.data);
				})
			},

			// 审核带货申请
			checkApply(status, item) {
				this.$post('/popularize/checkApply', {
					apply_id: item.id,
					status: status,
					check_content: status == 3 ? this.check_content : '',
				}).then(res => {
					this.showcheck = false;
					this.showmodal = true;
				})
			},

			onRef() {
				this.showmodal = false;
				this.log = [];
				this.logpage = 1;
				this.getAppleSellGoodsLog();
			},

			getPopularizeList() {
				this.$post('/popularize/getSellGoodsList', {
					page: this.popularizePage,
					type: 5,
					rec_show: '0,1'
				}).then(res => {
					this.popularizeTotal = res.data.total;
					this.popularizeList.push(...res.data.data);
				});
			},

		},

		created() {
			this.getProductList();
		}
	}
</script>

<style lang="less" scoped>
	.expert {
		padding: 16rpx 26rpx;
	}

	.tab {
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.item {
			flex: 1;
			font-size: 28rpx;
			color: #999999;
			text-align: center;
		}

		#select {
			font-weight: 500;
			color: #FD2A53;
		}
	}


	.container1 {
		flex-wrap: wrap;
		padding: 24rpx 0 0;

		.list {
			width: 336rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding-bottom: 18rpx;
			margin-bottom: 24rpx;

			.image {
				width: 336rpx;
				height: 336rpx;
				background: #D8D8D8;
				border-radius: 24rpx;
				overflow: hidden;

				image {
					width: 336rpx;
					height: 336rpx;
				}
			}

			.text {
				padding: 0 24rpx;
				margin-top: 24rpx;

				.name {
					font-size: 28rpx;
					color: #131313;
					margin-bottom: 10rpx;
				}

				.price {
					text {
						font-weight: 600;
						font-size: 36rpx;
						color: #FD2A53;
					}

					view {
						width: 88rpx;
						height: 40rpx;
						background: #FD2A53;
						border-radius: 20rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}

		}
	}

	.container2 {
		padding-top: 4rpx;

		.list {
			margin-top: 12rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			padding: 16rpx;

			.product {
				margin-bottom: 16rpx;

				.image {
					width: 176rpx;
					height: 176rpx;
					background: #D8D8D8;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 18rpx;

					image {
						width: 176rpx;
						height: 176rpx;
					}
				}

				.text {
					flex: 1;
					overflow: hidden;

					.name {
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 30rpx;
					}

					.grid {
						.item {
							flex: 1;

							.top {
								font-size: 24rpx;
								color: #999999;
							}

							.bottom {
								margin-top: 6rpx;

								image {
									width: 48rpx;
									height: 48rpx;
									border-radius: 24rpx;
									background: #D8D8D8;
									margin-right: 8rpx;
								}

								text {
									font-weight: 500;
									font-size: 24rpx;
									color: #333333;
								}
							}
						}
					}
				}
			}

			.info {
				font-size: 24rpx;
				color: #FD2A53;
				margin-bottom: 8rpx;
			}

			.btn {
				flex-direction: row-reverse;

				.btn_item {
					width: 136rpx;
					height: 48rpx;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 26rpx;
					line-height: 48rpx;
					text-align: center;
					margin-left: 16rpx;
				}

				.success {
					background: #FD2A53;
					color: #FFFFFF;
					border: 2rpx solid #FD2A53;
				}

				.error {
					background: #FFFFFF;
					color: #131313;
					border: 2rpx solid #CCCCCC;
				}
			}

		}
	}

	.container3 {
		padding-top: 4rpx;

		.list {
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 12rpx;
			display: flex;
			align-items: flex-start;
			overflow: hidden;
			padding: 16rpx;

			.image {
				width: 176rpx;
				height: 176rpx;
				background: #D8D8D8;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 176rpx;
					height: 176rpx;
				}
			}

			.left {
				flex: 1;
				overflow: hidden;

				.name {
					font-size: 32rpx;
					color: #333333;
				}

				.data {
					flex-wrap: wrap;

					.item {
						width: 50%;
						margin-top: 10rpx;

						text {
							font-size: 24rpx;
							color: #999999;
						}

						view {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}

						.red {
							color: #FF3F64;
						}
					}
				}
			}

		}
	}

	.loading {
		padding-bottom: 20rpx;
	}
	
	.check {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx 32rpx;
		
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			text-align: center;
		}
		
		.text {
			height: 280rpx;
			background: #F1F1F1;
			border-radius: 24rpx;
			padding: 24rpx;
			margin: 32rpx 0 28rpx;
			
			textarea {
				width: calc(616rpx - 64rpx - 48rpx);
				box-sizing: border-box;
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
		}
		
		.btn {
			view {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
			}
			
			.btn1 {
				background: #F1F1F1;
				color: #333;
			}
			
			.btn2 {
				background: #FD2A53;
				color: #FFF;
			}
		}
	}
	
</style>